<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老师作业</title>
    <link rel="stylesheet" href="style.css"/><!---->
    <link rel="stylesheet" href="slider.css"/><!--路边摊-->
    <link rel="stylesheet" href="css/about.css"/><!--about内容区css-->
    <link rel="stylesheet" href="css/book.css"/><!----book页面内容css-->
    <link rel="stylesheet" href="css/footer.css"/><!--页脚css-->
    <!--一定要记住每一次设计新区样式，要加入css表格啊啊啊！！！-->
    <script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<!--导航区开始-->
   <header id="header">
    <div class="center">
        <h1 class="logo">logo标题</h1>
        <nav class="link">
            <h1 class="none">网站导航</h1>
            <ul class="wuxu"> <!---->
                <li class="active"><a href="index.html">首页</a>
                  <ul id="xu">
                      <li><a href="book.html">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第二个ul-->
            <ul class="wuxu">
                <li class="active"><a href="book.html">菜单</a>
                  <ul id="xu">
                      <li><a href="about.html">可爱</a></li>
                      <li><a href="book.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第3个ul-->
            <ul class="wuxu">
                <li class="active"><a href="about.html">关于</a>
                  <ul id="xu">
                      <li><a href="book.html">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第4个ul-->
            <ul class="wuxu">
                <li class="active"><a href="book.html">轮播图</a>
                  <ul id="xu">
                      <li><a href="index.html">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第5个ul-->
            <ul class="wuxu">
                <li class="active"><a href="index.html">花朵</a>
                  <ul id="xu">
                      <li><a href="book.html">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <button class="button">搜索</button><!--搜索框-->
        </nav>
    </div>    
</header>

<!--导航区结束-->

<!--轮播图设计-->
<div id="slider">
    <ul class="slieder-item-container" id="ull"><!---->
        <li class="current"><a href="#"><img class="one" src="images/1.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/2.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/3.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/4.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/5.jpg" /></a></li>
    </ul>
    <div class="arrow-container"><!--左右按钮-->
        <span class="left-arrow"><</span>
        <span class="right-arrow">></span>
    </div>
    <div class="indicator-container"><!--圆点设置-->
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
    </div>
</div>
<!--轮播图结束-->

<!--about内容区开始-->
<div id="container">
    <!----右边开始---------->
    <aside class="sidebar">

        <!--1号表格开始-->
        <div class="sidebox">
            <h2>何柳慧推荐</h2>
            <div class="tag">
                <ul>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                </ul>
            </div>
        </div>
        <!--1号表格结束-->

        <!--2号表格开始-->
        <div class="hot">
            <h2>旅人绿森林</h2>
            <div class="figure">
                
                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>
            </div>

        </div>
        <!--2号表格结束-->

        <!--3号表格开始-->
        <div class="sidebox">
            <h2>旅游百宝箱</h2>
            <div class="box">
                <a href="###" class="trea1">天气预报</a>
                <a href="###" class="trea2">火车票查询</a>
                <a href="###" class="trea3">航空查询</a>
                <a href="###" class="trea4">地铁线路查询</a>
            </div>
        </div>
        <!--3号表格结束-->
    </aside>
    <!----右边结束---------->

    <!-----左边开始--------->
    <!-----左边book1开始--------->
    <div class="book1">
        <h2 class="hbok1">。。。《内容区展示》。。。</h2>
        <div id="keai">
            <span class="bok1"><img src="img/spring.jpg"/></span>
            <span class="bok1"><img src="img/summer.jpg"/></span>
            <span class="bok1"><img src="img/autumn.jpg"/></span>
            <span class="bok1"><img src="img/spring.jpg"/></span>
            <span class="bok1"><img src="img/summer.jpg"/></span>
        </div>
        <div id="bok2">
            <div class="xbok1">spring</div>
            <div class="xbok">spring</div>
            <div class="xbok">spring</div>
            <div class="xbok">spring</div>
            <div class="xbok">spring</div>
        </div>
        <div class="ch"></div>
    </div>
   <!-----左边book1结束--------->

   <!-----左边book2开始--------->
   <div class="book2">
        <!----->
        <form action="###">
            <h2>机票预订</h2>
            <div class="type">
                <p>航程类型<mark>单程</mark> 往返</p>
            </div>
            <div class="left">
                <p>
                    <label for="from_city">出发城市</label>
                    <input type="text" name="from_city" id="from_city" placeholder="城市名">
                </p>
                <p>
                    <label for="to_city">返回城市</label>
                    <input type="text" name="to_city" id="to_city" placeholder="城市名">
                </p>
            </div>

            <div class="right">
                <p>
                    <label for="from_date">出发时间</label>
                    <input type="text" name="from_date" id="from_date" placeholder="时间/日期">
                </p>
                <p>
                    <label for="to_date">返回时间</label>
                    <input type="text" name="to_date" id="to_date" placeholder="时间/日期">
                </p>
            </div>

            <div class="form button">
                <p>
                    <button type="submit" class="submit">订票</button>
                </p>
            </div>
        </form>
                  
        <!----->
        <div class="new">
            <h2>最新机票</h2>
            <ul>
                <li>热门城市</li>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
                <li>重庆</li>
                <li>成都</li>
                <li>杭州</li>
                <li>南京</li>
            </ul>

            <table>
                <thead>
                    <tr>
                        <th>路线</th>
                        <th>日期</th>
                        <th>价格</th>
                        <th>税费</th>
                        <th>餐食</th>
                        <th>航班</th>
                        <th>预订</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>北京-成都</td>
                        <td>10-15</td>
                        <td class="price">￥745</td>
                        <td>￥50</td>
                        <td>有</td>
                        <td>春秋航空</td>
                        <td><a href="###" class="reserve">预订</a></td>
                    </tr>
                    <tr>
                        <td>北京-成都</td>
                        <td>10-15</td>
                        <td class="price">￥745</td>
                        <td>￥50</td>
                        <td>有</td>
                        <td>春秋航空</td>
                        <td><a href="###" class="reserve">预订</a></td>
                    </tr>
                    <tr>
                        <td>北京-成都</td>
                        <td>10-15</td>
                        <td class="price">￥745</td>
                        <td>￥50</td>
                        <td>有</td>
                        <td>春秋航空</td>
                        <td><a href="###" class="reserve">预订</a></td>
                    </tr>
                    <tr>
                        <td>北京-成都</td>
                        <td>10-15</td>
                        <td class="price">￥745</td>
                        <td>￥50</td>
                        <td>有</td>
                        <td>春秋航空</td>
                        <td><a href="###" class="reserve">预订</a></td>
                    </tr>
                </tbody>

                <tfoot>
                    <td colspan="7"><a href="###" class="more2">加载更多航班...</a></td>
                </tfoot>
            </table>
        </div>
    
   </div>
   <!-----左边book2结束--------->

    <!-----左边开始--------->

</div>
<!--about内容区结束-->

<!--页脚区开始-->
<footer id="footer">

     <div class="fo1">
        <div class="block left">
            <h2>何柳慧@__@</h2>
            <hr>
            <ul>
                <li>途牛旅游网</li>
                <li>驴妈妈旅游网</li>
                <li>携程旅游</li>
                <li>中国青年旅行社</li>
            </ul>
        </div>
        <div class="block center">
            <h2>何柳慧@__@</h2>
            <hr>
            <ul>
                <li>旅游合同签订有哪些？</li>
                <li>儿童票有半价优惠吗？</li>
            </ul>
        </div>
        <div class="block right">
            <h2>何柳慧@__@</h2>
            <hr>
            <ul>
                <li>微博: weibo.com/zzz</li>
                <li>邮件: lpz2@163.com</li>
                <li>地址: 广西桂林</li>
            </ul>
        </div>
    </div>
     </div>

     <div class="fo2">Copyright © 18300206|网络工程1802班级|何柳慧：何柳慧</div>
</footer>
<!--页脚区结束-->


</body>
</html>